'use client';

import type { TMetadata } from '@/types';
import dynamic from 'next/dynamic';
import { useRouter } from 'next/navigation';
import useModal from '@/hooks/useModal';
import useUser from '@/hooks/useUser';
import useToast, { LoginReminderContent } from 'hooks/useToast';
import { ColorModeItem } from '@/app/[locale]/navbar';

const AnalysisDynamic: any = dynamic(() => import('../analysis/wrapper'), {
  ssr: false,
});

export default function FooterH5Page(
  this: any,
  { metadata }: { metadata: TMetadata },
) {
  const { show } = useToast();
  const userQuery = useUser(metadata);
  const router = useRouter();
  const { showModal } = useModal({
    metadata,
  });

  function onClickItem(index: number = 0) {
    if (index === 0) {
      router.push('/');
    } else if (index === 1) {
      router.push('/sections');
    } else if (index === 2) {
      if (!userQuery.data || !userQuery.data.user) {
        show({
          type: 'PRIMARY',
          title: '还未登录，是否进行登录?',
          content: <LoginReminderContent />,
        });
        return;
      }

      router.push('/message');
    } else if (index === 3) {
      router.push('/users/home');
    }
  }

  return (
    <>
      <ColorModeItem hidden={true} />

      <footer className="fixed-bottom py-1 border-top border-1 border-light-subtle card">
        <div className="hstack gap-4 justify-content-between align-items-center user-select-none card-body p-0">
          <div
            onClick={onClickItem.bind(this, 0)}
            className="vstack align-items-center"
          >
            <i className="bi bi-house-door fs-4"></i>
            <div className="small">首页</div>
          </div>
          <div
            onClick={onClickItem.bind(this, 1)}
            className="vstack align-items-center"
          >
            <i className="bi bi-card-text fs-4"></i>
            <div className="small">内容</div>
          </div>
          <div
            onClick={onClickItem.bind(this, 2)}
            className="vstack align-items-center"
          >
            <i className="bi bi-bell fs-4"></i>
            <div className="small">消息</div>
          </div>
          <div
            onClick={onClickItem.bind(this, 3)}
            className="vstack align-items-center"
          >
            <i className="bi bi-person fs-4"></i>
            <div className="small">用户</div>
          </div>
        </div>
      </footer>

      <AnalysisDynamic metadata={metadata} />
    </>
  );
}
